<template>

  <div class="content">
    <form>
    <div class="phone textbox">
      <p>手机号</p>
      <input type="text" name="username" class="input" id="phone">
      <!--<span id="phoneMsg" class="mess">手机号码格式错误</span>-->
    </div>
    <div class="message textbox">
      <span @click="getCheck()" id="code">获取验证码</span>
      <p >短信验证码</p>
      <input type="text" class="input" id="check">
      <!--<span class="mess" id="checkMsg">验证码错误</span>-->
    </div>
    <div class="pass textbox">
      <p>请输入密码</p>
      <input type="password" name="password" class="input" id="password">
      <!--<span id="passMsg" class="mess">密码长度不足六位</span>-->
    </div>
    <input type="button" value="注册" class="btn-login" @click="register()">
    </form>
    <div class="register" @click="click()">使用手机号登录</div>
    <div class="rapidtext">快捷登录</div>
    <ul class="rapid">
      <li><i class="iconfont icon-weixin"></i>微信</li>
      <li><i class="iconfont icon-icon_qq"></i>QQ</li>
      <li><i class="iconfont icon-sina"></i>新浪</li>
    </ul>
    <div class="information" id="information"></div>
  </div>
</template>
<script type="text/ecmascript-6">

    export default {
      data(){
        return{
            code:"获取验证码"
        }
      },
      mounted(){
        $(".information").css({
          left: ($(".content").width() - $(".information").outerWidth())/2,
          top: ($(".content").height() - $(".information").outerHeight())/2
        });
        $(".textbox").click(function () {
          $(this).children("p").animate({
            top:"-0.05rem",
            fontSize:"0.08rem"
          },500)
        });
        $(".input").blur(function () {
          if($(this).val()==""){
            $(this).prev().animate({
              top:"0.18rem",
              fontSize:"0.14rem"
            },500)
          }
        });
      },
      methods:{
        click:function () {
          this.$router.push({path:"/login"})
        },
        getCheck:function () {
          this.code=1000+parseInt(Math.random()*8999);
          $("#code").html(this.code);
          console.log(this.code)
        },
        register:function () {
          var arr1=["请输入手机号","请输入验证码","请输入密码"];
          var inputValue=document.getElementsByClassName("input");
          for(let i=0;i<inputValue.length;i++) {
            if (inputValue[i].value == "") {
              $("#information").css({
                display: "block"
              });
              $("#information").html(arr1[i])
              setTimeout(function () {
                $("#information").css({
                  display: "none"
                });
              }, 1500)
              return;
            }
          }
              //手机号验证
              var phoneStr = $("#phone")[0].value;
              var reg = /^1\d{10}$/;
              if (reg.test(phoneStr)) {
                $("#information").css("display","none");
              }
              else {
                $("#information").css("display","block");
              $("#information").html("手机号码格式错误");
                setTimeout(function () {
                  $("#information").css({
                    display: "none"
                  });
                }, 1500)
              return;
                  }
              //验证码验证
              var checkdStr=$("#check")[0].value;
              if(checkdStr==this.code){
                $("#information").css("display","none");
              }
              else{
                  $("#information").css("display","block");
                  $("#information").html("验证码错误");
                setTimeout(function () {
                  $("#information").css({
                    display: "none"
                  });
                }, 1500)
                  return;
            }
              //密码验证
              var passwordStr=$("#password")[0].value;
              var reg=/^[\w\W]{6,}$/;
              if(reg.test(passwordStr)){
                $("#information").css("display","none");
              }
              else{
                $("#information").css("display","block");
              $("#information").html("密码长度不足六位");
                setTimeout(function () {
                  $("#information").css({
                    display: "none"
                  });
                }, 1500)
              return;
                  }
                  if($("#information").css("display")=="none"){
                      var a = 0;
                      var username=$("#phone").val();
                      var password=$("#password").val();
                      fetch('http://localhost:3000/registerCheck/register', {
                      method: 'post',
                      headers: {
                          "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
                      },
                      body: `username=${username}&password=${password}`
                      })
                        .then(function (data) {
                            data.json().then(function (data) {
                                console.log(data.checked);
                                if(data.checked=="1"){
                                    a=1;
                                }else{
                                a=0;
                                }
                            })
                        })
                        .catch(function (error) {
                            console.log('Request failed', error);
                        });
                        setTimeout(()=> {
                        if(a==0){
                            this.addCookie("username",username,1);
                            this.$router.push("/my?username="+username)
                        }else{
                          $("#information").css("display","block");
                          $("#information").html("用户名已存在");
                          setTimeout(function () {
                            $("#information").css({
                              display: "none"
                            });
                          }, 1500)
                        }
                      },100)
                  }
               },
            }
    }
</script>
<style scoped>
  .information{
    position: absolute;
    background-color: rgba(128,128,128,0.7);
    color: white;
    font-size: 0.16rem;
    padding: 0.1rem 0.10rem;
    border-radius: 10px;
    display: none;
  }
  form{
    display: flex;
    flex-direction: column;
  }
  .content{
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    background-color: white;
    padding: 0.35rem 0.55rem;
    box-sizing: border-box;
  }
  .textbox{
    width: 100%;
    height: 0.7rem;
    position: relative;
    margin-bottom: 0.2rem;
  //display: flex;
  }
  .textbox input{
    font-size: 0.18rem;
  }
  .textbox p{
    font-size: 0.14rem;
    color: #A1A1A1;
    position: absolute;
    top: 0.18rem;
  }
  .textbox .mess{
    font-size: 0.14rem;
    color: red;
    position: absolute;
    white-space: nowrap;
    top: 0.7rem;
    left: 0rem;
    display: none;
  }
  .textbox input{
    width: 100%;
    height: 80%;
    border-top:none ;
    border-left: none;
    border-right:none;
    border-bottom: 1px solid #AAAAAA;
    outline:none;
    float: left;
  }
  .message span{
    font-size: 0.12rem;
    position: absolute;
    color: #E8065B;
    right: 0rem;
    top: 0.15rem;
  }
  .btn-login{
    width: 100%;
    height: 0.45rem;
    margin-top: 0.1rem;
    background-color: #E8065B;
    text-align: center;
    line-height: 0.45rem;
    color: #ffffff;
    font-size: 0.18rem;
    border: none;
    box-shadow: 0px 2px 3px #CECECE;
  }
  .register{
    font-size: 0.12rem;
    color: #A1A1A1;
    margin-top: 0.2rem;
  }
  .rapidtext{
    font-size: 0.1rem;
    color: #A1A1A1;
    width: 0.8rem;
    background-color: white;
    text-align: center;
    position: relative;
    margin: 0.7rem auto 0;
  }
  .rapidtext:after{
    position: absolute;
    content: "";
    border-top: 1px solid #A1A1A1;
    width: 100%;
    top: 0.08rem;
    right: -0.9rem;
  }
  .rapidtext:before{
    position: absolute;
    content: "";
    border-top: 1px solid #A1A1A1;
    width: 100%;
    top: 0.08rem;
    right: 0.9rem;
  }
  .rapid{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    margin-top: 0.2rem;
  }
  .rapid li{
    display: flex;
    flex-direction: column;
    font-size: 0.08rem;
    justify-content: center;
    align-items: center;
    color: #303236;
  }
  .rapid li .iconfont{
    font-size: 0.32rem;
    margin-bottom: 0.08rem;
  }
  .rapid li .icon-weixin{
    color: #64B58C;
  }
  .rapid li .icon-icon_qq{
    color: #7AB8CC;
  }
  .rapid li .icon-sina{
    color: #CC7A7A;
  }

</style>
